<template>
<div>
  <p>msg.canChangeContent.content = {{msg.canChangeContent.content}}</p>
  <p>msg.noChangeContent.content = {{msg.noChangeContent.content}}</p>
  <button @click="change">change</button>
</div>
</template>

<script>
import { markRaw, reactive, toRaw} from 'vue';
import { effect } from '@vue/reactivity';
export default {
  name: 'App',
  setup() {
    let msg = reactive({
      canChangeContent: {
        content: 'content'
      },
      noChangeContent: {
        content: 'neverChange'
      }
    });

    // effect(() => {
    //   console.log('data changed');
    // })

    let raw = toRaw(msg);
    msg = reactive(markRaw(Object.assign({}, raw)));

    function change() {
      msg.canChangeContent.content = 'changedContent';
      msg.noChangeContent.content = 'changedContent';
      console.log('msg =', msg);
    };
    return {
      msg,
      change
    };
  }
}
</script>